<template>
    <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in pic" :key="item">
            <img :src="item.imagePath">
        </el-carousel-item>
    </el-carousel>
    <br>
    <el-row>
        <el-col :span="8" ><div class="grid-content ep-bg-purple" />
            <el-button class="flex justify-space-between mb-4 flex-wrap gap-4"
                       @click="change(1)"
                       type=""
                       text
            ><el-icon><Avatar /></el-icon>商家介绍</el-button>
        </el-col>
        <el-col :span="8" ><div class="grid-content ep-bg-purple" /><el-button
                class="flex justify-space-between mb-4 flex-wrap gap-4"
                @click="change(2)"
                type=""
                text
        ><el-icon><Comment /></el-icon>用户反馈</el-button></el-col>
    </el-row>

    <br>
    <!--商家介绍-->

    <transition name="el-zoom-in-top" v-if="showVue===1">
        <div  class="transition-box" width="100%">
            <el-col :span="24">
                <el-icon><Location /></el-icon>
                <span >&ensp;&ensp;&ensp;{{address}}</span>
            </el-col>
            <br>
            <el-col :span="24">
                <el-icon><Tickets /></el-icon>
                &ensp;&ensp;
                <el-link @click="changeShowLicense">{{message}}</el-link>

                <el-dialog v-model="showLicense" title="食品安全相关证件" width="30%" :before-close="handleClose">
                    <!--显示相关图片-->
                    <span>营业执照</span>
                    <div>
                        <el-avatar shape="square" :size="100" :src="merchantInfo.certificate" class="avatar" />
                    </div>
                    <span>食品安全许可证</span>
                    <div>
                        <el-avatar shape="square" :size="100" :src="merchantInfo.license" class="avatar" />
                    </div>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button type="primary" @click="showLicense = false">
                          确认
                        </el-button>
                      </span>
                    </template>
                </el-dialog>
            </el-col>
            <br>
            <el-col :span="24">
                <el-icon><PhoneFilled /></el-icon>
                <span >&ensp;&ensp;&ensp;{{tele}}</span>
            </el-col>
            <br>
            <el-col :span="24">
                <el-icon><TakeawayBox /></el-icon>
                <span >&ensp;&ensp;&ensp;{{description}}</span>
            </el-col>
        </div>
    </transition>

    <!--用户反馈-->
    <div v-if="showVue==2">
        <div v-for="item in comment" class="comment-item">
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="2">
                    <el-avatar shape="square" :size="30" :src="item.image" style="background-color: white" class="avatar"></el-avatar>
                </el-col>
                <el-col :span="3" style="display: flex;align-items: center;">
                    <div class="grid-content ep-bg-purple" style="margin-right: 10px;"></div>
                    <div class="grid-content ep-bg-purple"></div>
                    <span style="font-size: 16px; display: flex; align-items: center;">用户{{item.userId}}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="22"><div class="grid-content ep-bg-purple" />
                    <div class="grid-content ep-bg-purple" style="margin-right: 10px;"></div>
                    <span style="font-size: 16px; display: flex; align-items: center;" class="description">{{item.description}}</span>
                </el-col>
            </el-row>
        </div>
    </div>


</template>
<script setup>
    import {computed, ref,onMounted} from "vue";
    import store from "../../store";
    import {getMerchant, getMerchantImage} from "../../api/merchant";
    import {
        Location,Message,Comment,Avatar,Tickets,PhoneFilled,TakeawayBox
    } from '@element-plus/icons-vue'
    import {useRoute} from "vue-router";
    import state from "../../store/merchant";
    import {getComment} from "../../api/comment";

    const merchantInfo=ref([])
    const address=ref('')
    const tele=ref('')
    const message=ref('查看食品安全档案')
    const description=ref('')
    const route=useRoute()
    const comment=ref([])
    const showLicense=ref(false)
    const pictures=ref({})

    const changeShowLicense=()=>{
        showLicense.value=true;
    }

    const id=computed(() => {
        return store.getters.getMerchantId
    })

    const pic=ref([
        {src:"../../public/img/merchantIndex/cx.jpg"},
        {src:"../../public/img/merchantIndex/ky.jpg"},
        {src:"../../public/img/merchantIndex/xf.jpg"}
    ])

    const showVue=ref(1)

    onMounted(()=>{
        getMerchant({merchantId:id.value}).then((res)=>{
            console.log(res.data)
            address.value=res.data.provinceName.toString()
                +res.data.cityName.toString()
                +res.data.districtName.toString()
                + res.data.detail.toString()
            tele.value=res.data.shopTelephone
            description.value=res.data.description
            merchantInfo.value=res.data

        })
        getComment({merchantId:id.value}).then(res=>{
            comment.value=res.data
        });

        getMerchantImage({merchantId:id.value}).then((res) => {
          console.log(res);
          if(res.state === 0) pic.value = res.data;
        });

    })
    const change=(value)=>{
        showVue.value=value
    }


</script>

<style scoped>
    .description {
        margin-top: 5px;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    .comment-item {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .avatar {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }
</style>